<template>
  <view class="order-detail-container">
    <u-navbar title="订单详情" :is-back="true" title-bold title-color="black"
              :background="background" :border-bottom="false"></u-navbar>
    <view class="status-bar">
      <text class="status-text">{{ statusText }}</text>
    </view>
    <view class="order-details">

      <view class="order-info column">
        <view class="order-item row">
          <view class="order-label">订单编号:</view>
          <view class="flex-1 row-between">
            <text class="order-value">{{ order?.order_number }}</text>
            <view class="copy-icon " @click="copyText(order.order_number)">复制</view>
          </view>
        </view>
        <view class="order-item">
          <text class="order-label">联系方式:</text>
          <text class="order-value underline" @click="handleCall" >{{ order.contact_number }}</text>
        </view>
<!--        <view class="order-item">-->
<!--          <text class="order-label">回收类型:</text>-->
<!--          <text class="order-value">{{ order.recycle_type === '1' ? '衣服' : '鞋帽' }}</text>-->
<!--        </view>-->
        <view class="order-item">
          <text class="order-label">预估重量:</text>
          <text class="order-value">{{ order.estimated_weight }}</text>
        </view>
        <view class="order-item">
          <text class="order-label">预约时间:</text>
          <text class="order-value">{{ order.pickup_time }}</text>
        </view>
        <view class="order-item">
          <text class="order-label">取件地址:</text>
          <text class="order-value">{{ order.pickup_address }}</text>
        </view>
        <view class="order-item">
          <text class="order-label">订单状态:</text>
          <text class="order-value">{{
              order.order_status === 0 ? '等待上门' : order.order_status === 1 ? '回收中' : order.order_status === 2 ? '已完成' : order.order_status === 3 ? '已取消' : ''
            }}
          </text>
        </view>
        <view class="order-item">
          <text class="order-label">下单时间:</text>
          <text class="order-value">{{ timeFormat(order.order_time, 'yy-mm-dd hh:MM:ss') }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import {ref, onMounted, computed} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import {timeFormat} from '@/utils/util'
import {apiDetail} from '@/api/order'

const background = {
  position: 'fixed', // 固定定位（相对于视口）
  top: '0',         // 使用字符串并添加单位
  left: '0',
  right: '0',
  zIndex: 999       // 确保层级足够高
}
const order = ref<any>({})
const getData = async () => {
  try {
    const res = await apiDetail({id: order.value.id})
    order.value = res || {}
  } catch (error) {
    uni.showToast({title: '获取订单详情失败', icon: 'none'})
  }
}

const copyText = (text: string) => {
  if (!text) {
    uni.showToast({title: '订单号为空', icon: 'none'});
    return;
  }

  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({title: '复制成功', icon: 'success'});
    },
    fail: () => {
      uni.showToast({title: '复制失败，请手动复制', icon: 'none'});
    }
  });
};
const handleCall = () => {
  uni.makePhoneCall({
    phoneNumber: String(order.value.contact_number)
  })
}

const statusText = computed(() => {
  return order.value.order_status === 0 ? '等待上门' : order.value.order_status === 1 ? '回收中' : order.value.order_status === 2 ? '已完成' : order.value.order_status === 3 ? '已取消' : ''
})
onLoad((query) => {
  if (query.id) {
    order.value.id = query.id
    getData()
  } else {
    uni.showToast({title: '缺少订单ID', icon: 'none'})
  }
})
</script>

<style scoped lang="scss">
.order-detail-container {
  background-image: linear-gradient(to bottom, #236af6, #ffffff); /* 添加渐变 */
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size: 100% 50%;
}

.status-bar {
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #000000;
}


.order-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  background-color: #ffffff;
}

.order-name {
  font-size: 32rpx;
  font-weight: bold;
}

.order-item {
  padding: 10rpx 0;

  color: #000000;
}

.order-label {

  margin-right: 70rpx;
  color: #999;
}

.order-value {
  color: #000000;
  font-weight: bold;
}

.copy-icon {
  color: #236af6;
  justify-self: self-end;
  font-weight: bold;
}
</style>